import React from 'react'
import { Row, Col, Checkbox, Select } from 'antd'
import { PIVOT_CHART_SHADOW_OPTIONS } from 'app/globalConstants'
const Option = Select.Option
import ColorPicker from 'components/ColorPicker'
const styles = require('../Workbench.less')

// chart 阴影调整

export interface IMapConfig {
  shadowType: string
  bgColor: string,
  borderColor: string,
  highlight: string,
  tooltipBg: string,
  fontColor: string,
  labelColor: string,
  showLabel: boolean,
  tooltipBorder: string
  // showSymbol: boolean,
}

interface IMapProps {
  title: string
  config: IMapConfig
  onChange: (prop: string, value: any) => void
}

export class MapSection extends React.PureComponent<IMapProps, {}> {

  private selectChange = (prop) => (value) => {
    this.props.onChange(prop, value)
  }

  private checkboxChange = (prop) => (e) => {
    this.props.onChange(prop, e.target.checked)
  }

  private colorChange = (prop) => (color) => {
    this.props.onChange(prop, color)
  }

  public render() {
    const { title, config } = this.props
    const {
      shadowType,
      bgColor,
      borderColor,
      highlight,
      tooltipBg,
      fontColor,
      labelColor,
      showLabel,
      tooltipBorder
      // showSymbol,
    } = config

    const fontFamilies = PIVOT_CHART_SHADOW_OPTIONS.map((f) => (
      <Option key={f.value} value={f.value}>{f.name}</Option>
    ))

    return (
      <div className={styles.paneBlock}>
        <h4>{title}</h4>
        <div className={styles.blockBody}>
          {/* <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
            <Col span={8}>阴影渐变填充</Col>
            <Col span={16}>
              <Select
                placeholder="渐变类型"
                className={styles.blockElm}
                value={shadowType}
                onChange={this.selectChange('shadowType')}
              >
                {fontFamilies}
              </Select>
            </Col>
          </Row> */}
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
            <Col span={8}>
              地图背景色
            </Col>
            <Col span={4}>
              <ColorPicker
                value={bgColor}
                onChange={this.colorChange('bgColor')}
              />
            </Col>
            <Col span={8}>
              边框颜色
            </Col>
            <Col span={4}>
              <ColorPicker
                value={borderColor}
                onChange={this.colorChange('borderColor')}
              />
            </Col>
          </Row>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
            {/* <Col span={8}>
              浮框背景
            </Col>
            <Col span={4}>
              <ColorPicker
                value={tooltipBg}
                onChange={this.colorChange('tooltipBg')}
              />
            </Col> */}
            <Col span={8}>
              浮框字体颜色
            </Col>
            <Col span={4}>
              <ColorPicker
                value={fontColor}
                onChange={this.colorChange('fontColor')}
              />
            </Col>
          </Row>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
            <Col span={8}>
              高亮背景颜色
            </Col>
            <Col span={4}>
              <ColorPicker
                value={highlight}
                onChange={this.colorChange('highlight')}
              />
            </Col>
            <Col span={8}>
              浮框边框颜色
            </Col>
            <Col span={4}>
              <ColorPicker
                value={tooltipBorder}
                onChange={this.colorChange('tooltipBorder')}
              />
            </Col>
          </Row>
          <Row
            gutter={8}
            type="flex"
            align="middle"
            className={styles.blockRow}
          >
            <Col span={10}>
              <Checkbox
                checked={showLabel}
                onChange={this.checkboxChange('showLabel')}
              >
                显示标签
              </Checkbox>
            </Col>
            <Col span={8}>
              高亮标签颜色
            </Col>
            <Col span={4}>
              <ColorPicker
                value={labelColor}
                onChange={this.colorChange('labelColor')}
              />
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}

export default MapSection
